<template>
  <ul class="user_Overview">
    <li class="user_Overview-item" style="color: #00fdfa">
      <div class="user_Overview_nums allnum ">
      </div>
      <p class="titles">节约标准煤</p>
      <p class="titles_Con">{{ sjlist?sjlist.coal:0}} <span>吨</span></p>

    </li>
    <li class="user_Overview-item" style="color: #07f7a8">
      <div class="user_Overview_nums online">
      </div>
      <p class="titles">CO2减排总量</p>
      <p class="titles_Con1">{{ sjlist ?sjlist.co2:0}}<span>吨</span></p>

    </li>
    <li class="user_Overview-item" style="color: #07f7a8">
      <div class="user_Overview_nums online1">
      </div>
      <p class="titles">种树总量</p>
      <p class="titles_Con1">{{ sjlist?sjlist.trees:0 }} <span>棵</span></p>
    </li>
  </ul>
</template>

<script>

export default {
  props:['sjlist']
};
</script>
<style lang='scss' scoped>
.user_Overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: 34px;

  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 106px;
      height: 140px;
      margin: 0 auto;
      background-size: cover;
      background-position: center center;
      position: relative;
    }

    .titles {
      height: 17px;
      font-weight: 500;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 14px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .titles_Con {
      margin-top: 10px;
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      height: 28px;
      text-align: center;
      background: linear-gradient(90deg, #FFFFFF 0%, #C7BB1B 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      span {
        font-size: 12px;
      }
    }

    .titles_Con1 {
      margin-top: 10px;
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      height: 28px;
      text-align: center;
      background: linear-gradient(90deg, #FFFFFF 0%, #18D2B5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      span {
        font-size: 12px;
      }
    }

    .allnum {
      background-image: url("../../assets/img/Frame_10348.png");
    }

    .online {
      background-image: url("../../assets/img/Frame_10349.png");
    }

    .online1 {
      background-image: url("../../assets/img/Frame_10350.png");
    }
  }
}</style>